<template>
  <div class="detail email-detail">
    <div class="detail-left" :style="{width:Width}">
      <h1 class="title"  :style="{width:Width}"><i @click="back" title="返回上一页" class="iconfont icon-fanhui"></i>
        主题：{{content.emailSubject}}</h1>
      <ul class="message" style="margin-top: 50px !important;">
        <li><span>发件人：</span>
          <div>{{content.senderEmail}}</div>
        </li>
        <li><span>时间：</span>
          <div>{{content.sendTime}}</div>
        </li>
        <li><span>收件人：</span>
          <div>{{content.addresseeEmail}}</div>
        </li>
        <li v-show="content.emailCarbonCopy"><span>抄送：</span>
          <div>{{content.emailCarbonCopy}}</div>
        </li>
        <li v-show="content.emailSecretDelivery&&content.emailType==0"><span>密送：</span>
          <div>{{content.emailSecretDelivery}}</div>
        </li>
        <li v-show="content.emailHtmlpicList.length>0"><span>附件：</span>
          <div style="font-size: 12px">共{{content.emailHtmlpicList.length}}个文件
            (<a v-for="item in content.emailHtmlpicList" target="_blank" :href="item.fileGuid">{{item.picName}};&nbsp;&nbsp;</a>)
          </div>
        </li>
      </ul>
      <!-- 内容滚动区域-->
      <div class="scroll-area" style=" padding: 10px 15px;" v-show="show">
        <iframe :src="`/api/blade-email/html/content?id=${mailId}&ip=${this.host}&Blade-Auth=${token}`" width="100%" :height="clientHeight"></iframe>
      </div>
      <!-- 附件展示-->
      <div class="else" v-show="content.emailHtmlpicList.length>0">
        <h1 class="title-else">附件 (共{{content.emailHtmlpicList.length}}个)</h1>
        <MailFileDetail :list="content.emailHtmlpicList"></MailFileDetail>
      </div>
    </div>
    <div class="detail-right">
      <div class="chooseMan">
        <el-select size="small" v-model="relationMan" @change="handleChange"  placeholder="选择查看的联系人">
          <el-option v-for="item,index in customerList" :key="index" :label="item.linker" :value="item.email"></el-option>
        </el-select>
      </div>
      <div class="head-info" style="padding: 15px;border: 0">
        <img src="../../../../public/img/head.png" alt="">
        <div class="head-detail">
          <h1 :title="customer.linker">{{customer.linker}}</h1>
          <p class="more" :title="customer.email"><{{customer.email}}></p>
        </div>
      </div>
      <h2 class="else-title"><span>往来邮件</span></h2>
      <!-- 列表-->
      <el-collapse style="height: 728px;">
        <el-collapse-item>
          <template slot="title">
            共{{relationList.length}}封邮件
          </template>
          <div>
            <ul>
              <li v-for="item,index in relationList" :key="index" @click="change(item)">
                <h1 class="more">{{item.emailSubject}}</h1>
                <p><b class="more" v-html="dealContent(item.emailContent)"></b> <span>{{item.sendTime.substr(5)}}</span>
                </p>
              </li>
              <li v-show="relationList.length==0">
                <div class="empty">
                  <img src="../../../../public/img/empty.png" alt="">
                </div>
              </li>
            </ul>
          </div>
        </el-collapse-item>
      </el-collapse>

    </div>
  </div>
</template>

<script>
    import MailFileDetail from '@/components/mail/file/MailFileDetail'
    import {relation} from '@/api/mail/write'
    import {queryLinker} from '@/api/order'
    import {getToken} from '@/util/auth'

    export default {
        name: "detail",
        components: {MailFileDetail},
        data() {
            return {
                clientHeight:document.documentElement.clientHeight,
                content: {
                    emailHtmlpicList: []
                },
                quickEmail: '',
                Width: 0,
                relationList: [],
                boxID: '',
                customer: {
                    linker: '联系人名称',
                    email: '联系人邮箱'
                },
                customerList: [],
                relationMan: '',
                host:'',
                mailId:'',
                show:false,
                token:''
            }
        },
        created() {
            //获取所有往来邮件
            this.relationEmail();
            //获取联系人
            this.queryLinker();
            this.Width = document.body.clientWidth - 590 + 'px';
            this.token = "bearer "+getToken();

        },
        methods: {
            back(){
                if (sessionStorage.getItem("lastpathRela")) {
                    this.$router.push(sessionStorage.getItem("lastpathRela"))
                } else {
                    this.$router.go(-1)
                }
            },
            //根据客户ID查询所有联系人
            queryLinker() {
                queryLinker(this.$route.params.customerID).then(res => {
                    if (res.data.success) {
                        this.customerList = res.data.data;
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            //切换联系人
            handleChange(val) {
                if(this.customerList.length!=0){
                    this.customerList.map(item=>{
                        if(item.email==val){
                            this.customer = {
                                linker: item.linker,
                                email: item.email
                            }
                        }
                    })
                    this.getTargetEmail({addresseeEmail: [this.customer.email]});
                }
            },
            //根据联系人邮箱获取相关邮件
            getTargetEmail(params) {
                relation(params).then(res => {
                    if (res.data.success) {
                        this.relationList = res.data.data;
                    }
                })
            },
            //切换邮件
            change(row) {
                this.content = row;
                this.mailId = this.content.temailInfoId;
                if (process.env.NODE_ENV == 'production') {//生成环境
                    this.host = 'https://' + location.host
                }else{
                    this.host = 'http://192.168.0.6:1888'
                }
                this.show = true
            },
            //获取往来邮件
            relationEmail() {
                var params = {addresseeEmail: this.$route.params.id.split(',')};
                if(this.$route.params.userId) {
                    params = {addresseeEmail: this.$route.params.id.split(','), userId: this.$route.params.userId};
                }
                relation(params).then(res => {
                    if (res.data.success) {
                        this.relationList = res.data.data;
                        this.content = this.relationList[0];
                        this.mailId = this.content.temailInfoId;
                        if (process.env.NODE_ENV == 'production') {//生成环境
                            this.host = 'https://' + location.host
                        }else{
                            this.host = 'http://192.168.0.6:1888'
                        }
                        this.show = true
                    }
                })
            },
            dealContent(str) {
                let reg = /<(style)(?:[^>]*)?>([\s\S]*?)(?:<\/\1>[^\"\']|<\/\1>$)/ig;
                let msg = str.replace(reg, '');
                let reg1 = new RegExp("<[^>]+>", "g");
                msg = msg.replace(reg1, '');
                return msg;
            },
        }
    }
</script>

<style scoped lang="scss">
  @import "../../../styles/relationEmail";
</style>
